<template>
    <div class="component-manage-tab-item" @click="navigateTo" :class="[color]">
        <div class="icon" :style="{'background-image': 'url(' + icon + ')'}"></div>
        <div class="name">{{title}}</div>
    </div>
</template>

<script>
import {
    api,
} from '@/lib/api';

export default {
    name: 'TabItem',
    props: {
        color: {
            type: String,
            default: 'blue',
        },
        icon: {
            type: String,
        },
        title: {
            type: String,
        },
        to: {
            type: Object,
        },
    },
    methods: {
        navigateTo() {
            if (this.to) {
                api.push(Object.assign({}, this.to));
            }
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.component-manage-tab-item {
    width: 67%;
    display: flex;
    align-items: center;
    padding: 35px 10px 35px 28px;
    border: 2rpx solid rgba(255, 255, 255, 1);
    margin: 21px 37 *2rpx;
    background-color: @white-color;
    border-radius: 10rpx;
    box-shadow: 0px 2rpx 2rpx 0px rgba(0, 0, 0, 0.4);
    .icon {
        display: inline-block;
        width: 51px;
        height: 51px;
        margin-right: 57px;
        background: center no-repeat;
        background-size: contain;
    }
    .name {
        font-size: 20px;
    }
    &.blue {
        .icon {
            color: @color-blue;
        }
    }
    &.yellow {
        .icon {
            color: @color-yellow;
        }
    }
}
</style>
